<template>
	<view>
		<view class="bg">
			<view class="line animation"></view>
		</view>
		<view class="label-list">
			<view @click="doSelect(item)" :class="['label-item',curLabelId===item.id?'curLabel':'']" v-for="item in labelList" :key="item.id">
				{{item.labelName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curLabelId: 1,
				labelList: [
					{labelName: '测试', id: 1},
					{labelName: '测试1', id: 2},
					{labelName: '测试2', id: 3},
				]
			}
		},
		methods: {
			doSelect(item) {
				this.curLabelId = item.id
			}
		}
	}
</script>

<style lang="scss">
	$randomNumber: random(5);
	.bg{
		height: 300rpx;
		width: 300rpx;
		background: #ff0000;
		background: url(https://browser9.qhimg.com/bdm/360_222_0/t01f0d712d10ff619ee.jpg) no-repeat;
		background-size: 100% 100%;
		border-radius: 50%;
		position: relative;
		animation: dobgrotate 2s linear 0s infinite;
	}
	@keyframes dobgrotate {
		from {transform: rotate(0deg);}
		to {transform: rotate(360deg);}
		// 0% {
			
		// }
		// 10% {
			
		// }
		// 30% {
			
		// }
		// ...
		// 100% {
			
		// }
	}
	.label-list{
		display: flex;
		align-items: center;
		.label-item{
			text-align: center;
			border-radius: 8rpx;
			border: 1px solid #ccc;
			padding: 0 10rpx;
			margin-right: 10rpx;
			&.curLabel {
				border-color: green;
			}
		}
	}
</style>
